<template>
    <div class="content-container content-panel">
        <h3 class="main-title">
            <a-row align="middle" type="flex">
                <a-col :span="8" class="left">检验标准</a-col>
            </a-row>
        </h3>
        <div class="content">
            <div class="buttons">
                <a-row style="margin-bottom: 10px;">
                    <a-col :span="12">
                        <a-button type="primary" @click="handleOpenModal('','add')">新增</a-button>
                    </a-col>
                    <a-col :span="12" class="a-col-custom">
                        <div class="lines-row" v-show="!displayAll">
                            <a-input-search
                                v-model="queryParams.data.matchParam"
                                placeholder="标准编码/标准名称"
                                @search="init"
                                enterButton
                            />
                        </div>
                        <div class="lines-row">
                            <a @click="advanceSearchShowClk" class="queryText">
                                高级搜索
                                <a-icon :type="displayAll ? 'up' : 'down'" />
                            </a>
                        </div>
                    </a-col>
                </a-row>
            </div>
            <div class="query-content" :style="{ display: displayAll ? 'block' : 'none' }">
                <a-form :model="queryParams.data" @submit="handleSearch" hideRequiredMark>
                    <div class="row-container">
                        <a-form-item label="标准编码">
                            <a-input v-model="queryParams.data.code" />
                        </a-form-item>
                        <a-form-item label="标准名称">
                            <a-input v-model="queryParams.data.name" />
                        </a-form-item>
                        <a-form-item label="标准类型">
                            <a-input v-model="queryParams.data.type" />
                        </a-form-item>
                        <a-form-item label="项目编码">
                            <a-input v-model="queryParams.data.inspectItemCode" />
                        </a-form-item>
                        <a-form-item label="项目名称">
                            <a-input v-model="queryParams.data.inspectItemName" />
                        </a-form-item>
                    </div>
                    <a-row :gutter="16">
                        <a-col :span="24" :style="{ textAlign: 'right' }">
                            <a-button type="primary" @click="handleSearch">{{ $t("common.search") }}</a-button>
                            <a-button
                                :style="{ marginLeft: '8px' }"
                                @click="handleReset"
                            >{{ $t("common.reset") }}</a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <a-table
                :columns="columns"
                :dataSource="dataSource"
                :rowKey="record => record.id"
                :loading="loading"
                :pagination="false"
            >
                <template slot="index" slot-scope="text, record, index">
                    <span>{{ queryParams.pageSize * (queryParams.pageNum - 1) + index + 1 }}</span>
                </template>
                <template slot="type" slot-scope="text, record">
                    <a-tag
                        :color="dict.standardOptions[record.type-1].color"
                    >{{ dict.standardOptions[record.type-1].label }}</a-tag>
                </template>
                <template slot="dataSource" slot-scope="text,record">
                    <a-tag
                        :color="dict.dataSourceOptions[record.dataSource].color"
                    >{{ dict.dataSourceOptions[record.dataSource].label }}</a-tag>
                </template>
                <template slot="action" slot-scope="text, record">
                    <span>
                        <a href="javascript:;" @click="handleOpenModal(record,'view')">详情</a>
                        <a-divider type="vertical" />
                        <a href="javascript:;" @click="handleOpenModal(record,'edit')">编辑</a>
                        <a-divider type="vertical" />
                        <a href="javascript:;" @click="handleDeleteRow(record)">删除</a>
                    </span>
                </template>
            </a-table>
            <div style="margin-top: 10px; float: right;">
                <LibsPagination
                    :pageNum="pageNum"
                    :pageSize="pageSize"
                    :total="total"
                    :current="current"
                    @currentPageChange="currentPageChange"
                    @pageSizeChange="pageSizeChange"
                ></LibsPagination>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</template>

<script>
import "@/assets/query.css";
import dict from "../dict.json";
import { mapState } from "vuex";
import LibsCommonBasics from "libs-common-basics";
const columns = [
    {
        title: "序号",
        dataIndex: "index",
        scopedSlots: { customRender: "index" },
        width: 90,
        align: "center",
    },
    {
        title: "标准编码",
        dataIndex: "code",
        width: 150,
    },
    {
        title: "标准名称",
        dataIndex: "name",
        width: 150,
    },
    {
        title: "标准类型",
        dataIndex: "type",
        width: 150,
        scopedSlots: { customRender: "type" },
    },
    {
        title: "来源",
        dataIndex: "dataSource",
        width: 100,
        scopedSlots: { customRender: "dataSource" },
    },
    {
        title: "备注",
        dataIndex: "remark",
        width: 150,
    },
    {
        title: "操作",
        key: "action",
        width: 120,
        scopedSlots: { customRender: "action" },
    },
];
export default {
    data() {
        return {
            dict,
            columns,
            displayAll: false,
            queryParams: {
                data: {},
                pageNum: parseInt(LibsCommonBasics.LibsPagination.props.pageNum.default),
                pageSize: parseInt(LibsCommonBasics.LibsPagination.props.pageSize.default),
            },
        };
    },
    methods: {
        // 切换页码
        currentPageChange({ current }) {
            let self = this;
            self.$store.state.QCStandard.loading = true;
            self.$store.state.QCStandard.pager.pageNum = current;
            self.queryParams.pageNum = current;
            this.init();
        },
        // 切换当前页记录数
        pageSizeChange({ pageSize }) {
            let self = this;
            self.$store.state.QCStandard.loading = true;
            self.$store.state.QCStandard.pager.pageNum = 1;
            self.$store.state.QCStandard.pager.pageSize = pageSize;
            self.queryParams.pageNum = 1;
            self.queryParams.pageSize = pageSize;
            this.init();
        },
        //高级搜索开关
        advanceSearchShowClk() {
            this.displayAll = !this.displayAll;
        },
        // 打开模态框
        handleOpenModal(data, flag) {
            this.$router.push({
                path: "standardDetail",
                query: {
                    data: data,
                    flag: flag,
                },
            });
        },
        //查询
        handleSearch(e) {
            let self = this;
            self.queryParams.pageNum = parseInt(LibsCommonBasics.LibsPagination.props.pageNum.default);
            self.$store.state.QCStandard.loading = true;
            self.init();
        },
        //重置查询表单
        handleReset() {
            this.queryParams.data = {};
        },
        // 删除当前行数据
        handleDeleteRow(rowData) {
            let self = this;
            self.$confirm({
                title: "确认",
                content: "确定删除?",
                okText: "确定",
                cancelText: "取消",
                onOk() {
                    let params = { codes: [rowData.id] };
                    self.$store
                        .dispatch(dict.action.standard.deleteAction, params)
                        .then(res => {
                            if (parseInt(res.code) === 1) {
                                self.$message.success("成功");
                                self.init();
                            }
                        })
                        .catch(err => {
                            self.$message.error("失败" + res.msg + "(" + res.code + ")");
                        });
                },
            });
        },
        init() {
            this.$store.dispatch(dict.action.standard.queryAction, this.queryParams);
        },
    },
    computed: {
        ...mapState({
            loading: state => state.QCStandard.loading, // 列表数据加载状态
            dataSource: state => state.QCStandard.dataSource,
            // 分页监听
            pageNum: state => parseInt(state.QCStandard.pager.pageNum),
            pageSize: state => parseInt(state.QCStandard.pager.pageSize),
            total: state => parseInt(state.QCStandard.pager.total),
            current: state => parseInt(state.QCStandard.pager.current),
        }),
    },
    mounted() {
        this.init();
    },
};
</script>
